
<template>
		<view class="main">
			<view class="up"> 
			<!-- 主要部分上 -->
				<button class="card1">
					<image class="imgA" src="../../static/A.png"></image>
				</button>
				<button class="card2">
					<image class="imgB" src="../../static/B.png"></image>
				</button>
				<button class="card2">
					<image class="imgB" src="../../static/B.png"></image>
				</button>
			</view>
			<view class="down"> 
			<!-- 主要部分下 -->
				<button class="card3">
					<image class="imgC" src="../../static/C.png"></image>
				</button>
				<button class="card4">
					<image class="imgD" src="../../static/D.png"></image>
				</button>
				<button class="card4">
					<image class="imgD" src="../../static/D.png"></image>
				</button>
			</view>
		</view>
</template>
<script>
</script>
<style>
	body {
		background-color: black; 
		/* 设置整个页面的背景颜色为黑色 */
	}



	image {
		width: 30px; 
		/*  图片宽度为30像素 */
		height: 30px; 
		/* 图片高度为30像素 */
	}

	.main {
		display: flex;
		flex-direction: column;
		/* gap: 0.5em; */
		/* 子元素之间的间距为0.5em */
		align-items: center;
		justify-content: center;
		margin-top: 200px; 
	}

	

	.down,
	.up {
		display: flex;
		flex-direction: row;
		/* gap: 0.5em; */
		/* 子元素之间的间距为0.5em */
	}

	.card1 {
		width: 90px; 
		/* 卡片1的宽度为90像素 */
		height: 90px; 
		/* 卡片1的高度为90像素 */
		background: white; 
		/* 卡片1的背景颜色为白色 */
		border-radius: 90px 5px 5px 5px; 
		/* 设置卡片1的边框圆角 */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 
		/* 设置卡片1的阴影效果 */
		transition: 0.5s ease-in-out; 
		/* 添加过渡效果 */
	}

	.imgA {
		margin-top: 35px; 
		/* 图片与顶部的距离为35像素 */
		margin-left: 20px; 
		/* 图片与左侧的距离为20像素 */
	
	}

	.card2 {
		width: 90px; 
		/* 卡片2的宽度为90像素 */
		height: 90px; 
		/* 卡片2的高度为90像素 */
		
		background: white; 
		/* 卡片2的背景颜色为白色 */
		border-radius: 5px 90px 5px 5px; 
		/* 设置卡片2的边框圆角 */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 
		/* 设置卡片2的阴影效果 */
		transition: 0.5s ease-in-out; 
		/* 添加过渡效果 */
	}

	.imgB {
		margin-top: 35px; 
		/* 图片与顶部的距离为35像素 */
		margin-left: -20px; 
		/* 图片与左侧的距离为-20像素 */
	
	}

	.card3 {
		width: 90px; 
		/* 卡片3的宽度为90像素 */
		height: 90px; 
		 /* 卡片3的高度为90像素 */
		background: white; 
		/* 卡片3的背景颜色为白色 */
		border-radius: 5px 5px 5px 90px; 
		/* 设置卡片3的边框圆角 */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 
		/* 设置卡片3的阴影效果 */
		transition: 0.5s ease-in-out; 
		/* 添加过渡效果 */
	}

	.imgC {
		margin-top: 25px; 
		/* 图片与顶部的距离为25像素 */
		margin-left: 20px;  
		/* 图片与左侧的距离为20像素 */

	}

	.card4 {
		width: 90px; 
		/* 卡片4的宽度为90像素 */
		height: 90px; 
		/* 卡片4的高度为90像素 */
		background: white; 
		/* 卡片4的背景颜色为白色 */
		border-radius: 5px 5px 90px 5px; 
		 /* 设置卡片4的边框圆角 */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 
		/* 设置卡片4的阴影效果 */
		transition: 0.5s ease-in-out; 
		/* 添加过渡效果 */
	}

	.imgD {
		margin-top: 25px; 
		/* 图片与顶部的距离为25像素 */
		margin-left: -20px; 
		/* 图片与左侧的距离为-20像素 */
	
	}

	.card1:hover {
		cursor: pointer;
		background-color: #cc39a4;  
		/* 鼠标悬停时卡片1的背景颜色为#cc39a4 */
	}


	.card2:hover {
		cursor: pointer;
		background-color: #03A9F4; 
		/* 鼠标悬停时卡片2的背景颜色为#03A9F4 */
	}


	.card3:hover {
		cursor: pointer;
		background-color: #a486ff; 
		/* 鼠标悬停时卡片3的背景颜色为#a486ff */
	}


	.card4:hover {
		cursor: pointer;
		background-color: #8c9eff; 
		/* 鼠标悬停时卡片4的背景颜色为#8c9eff */
	}

</style>